import React, { Component } from "react";
import banner from "../images/banner.jpg";
import { Link } from "react-router-dom";
import { VIDEO_LINK } from "../actions/types.js"
import axios from "axios";
class RaceAreaVideoList extends Component {
  state = {videoList:[]}
  getVideoList(area){
    axios.get(`/Tgh/data/site_video_data?site_name=${area}`).then(res=>{
      this.setState({videoList:res.data.data});
    })
  }
  componentDidMount(){
    this.getVideoList(this.props.area);
  }
  componentWillUpdate(nextProps){
    if(this.props.area !== nextProps.area){
      this.getVideoList(nextProps.area);
    }
  }
  render(){
    return(
      <section className="race-area" style={{marginTop:0}}>
        <h4>{this.props.area}</h4>
        <div className="race-area-content">
          {this.renderVideoList()}
        </div>
      </section>
    )
  }
  renderVideoList(){
    if(this.state.videoList.length !== 0){
      return this.state.videoList.map(list=>{
        const { id, video_name } = list
        let videoImageUrl = list.video_image;
        if(videoImageUrl.indexOf("http") === -1){
          videoImageUrl = `/images/${videoImageUrl}`
        }
        return(
          <Link to={`${VIDEO_LINK}/${id}`} key={id} className="content-contain">
            <div
              className="content-img"
              style={{ backgroundImage: `url(${videoImageUrl})` }}
            />
            <div>{video_name}</div>
          </Link>
        )
      })
    }else{
      return(
        <React.Fragment>
          <Link to={`${VIDEO_LINK}/demo`} className="content-contain">
            <div
              className="content-img"
              style={{ backgroundImage: `url(${banner})` }}
            />
            <div>视频1</div>
          </Link>
          <Link to={`${VIDEO_LINK}/demo`} className="content-contain">
            <div
              className="content-img"
              style={{ backgroundImage: `url(${banner})` }}
            />
            <div>视频2</div>
          </Link>
        </React.Fragment>
      )
    }
  }
}

export default RaceAreaVideoList